//剪裁插件使用步骤
//1.初始化  --> 得到一个剪裁框
let $image = $('#image')
let option = {
    aspectRatio: 1,
    preview: '.img-preview'
}
$image.cropper(option);




//----------------点击上传按钮触发文件域事件
$('button:contains("上传")').on('click', function() {
    $('#file').trigger('click')
})

//-------------文件内容改变更换预览去图片

$('#file').on('change', function() {
    if (this.files.length > 0) {
        let fileObj = this.files[0]
        let url = URL.createObjectURL(fileObj)
        $image.cropper('replace', url)
    }
})

//------------点击确定剪裁图片,转换格式,ajax提交
$('button:contains("确定")').on('click', function() {
    //调用插件的方法剪裁
    let canvas = $image.cropper('getCroppedCanvas', { width: 30, heigth: 30 })
    let str = canvas.toDataURL('$image', 0.5);
    // 提交base64 格式的字符串
    $.ajax({
        type: 'POST',
        url: '/my/user/avatar',
        data: { avatar: str },
        success: function(res) {
            layer.msg(res.message)
            window.parent.getUserInfo()
        }
    })
})